<template>
    <a-card>
        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }" :model="uiParam">
            <a-form-item label="项目路径">
                <a-input v-model:value="uiParam.projectPath" />
            </a-form-item>
            <a-form-item label="相对路径">
                <a-input v-model:value="uiParam.relativePath" />
            </a-form-item>
            <a-form-item label="类名前缀">
                <a-input v-model:value="uiParam.classPrefix" />
            </a-form-item>
            <a-form-item label="对象名前缀">
                <a-input v-model:value="uiParam.objectPrefix" />
            </a-form-item>
            <a-form-item label="名称">
                <a-input v-model:value="uiParam.name" placeholder="用于页头及编辑对话框显示标题" />
            </a-form-item>
            <a-form-item label="Url">
                <a-input
                    v-model:value="uiParam.requestRelativeUrl"
                    placeholder="Controller类注解中的url"
                />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 10, offset: 2 }">
                <a-button type="primary" @click="handleCodeGenerate">生成</a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { message } from 'ant-design-vue';
// Api
import { ApiCodeGenerator } from '@/axios/api';
// Model
import { Result } from '@/model/common';
import { TemplateParamForm, UiTemplateParam } from '@/model/code_generator';

const uiParam = reactive(new UiTemplateParam());

watch(() => uiParam.classPrefix, (value) => {
    uiParam.objectPrefix = value.charAt(0).toLowerCase() + value.slice(1);
});
watch(() => uiParam.objectPrefix, (value) => {
    uiParam.requestRelativeUrl = value;
});

const handleCodeGenerate = () => {
    const form = new TemplateParamForm();
    form.uiParam = uiParam;
    ApiCodeGenerator.codeGenerate(form)
        .then(() => {
            message.success('代码生成成功！');
        })
        .catch((err: Result) => {
            message.error(`代码生成失败！${err.msg}`);
        })
}
</script>

<style lang="less" scoped>
</style>